{% extends 'base.html' %}
{% block title %}
    产品详情
{% endblock %}

{% block style %}
    <style>
        .wrap {
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
        }

        #left {
            width: 65%;
            float: left;
            border-style: solid;
            border-width: 0 1px 0;
            border-color: #eee;
        }

        #right {
            width: 28%;
            float: left;
            margin-top: 60px;
        }


        #product {
            width: 80%;
            position: relative;
            padding: 0 18px;
            margin: 0 auto;
        }

        #product h2 {
            color: #0f9095;
            font: 30px/42px montserrat-bold, sans-serif;
            margin-bottom: 24px;
        }

        #product .spec {
            color: #999999;
            font: 14px/24px opensans-regular, sans-serif;
        }

        #product .desc {
            color: #A3A3A3;
            font: 20px/36px opensans-light, sans-serif;
            margin: 0 0 24px 0;
        }

        #product .image-wrapper {
            width: 100%;
            margin: 36px 0 40px 0;
        }

        #product .image-wrapper img {
            width: 100%;
            max-height: 1008px;
        }


        #nav-3 {
            margin: auto 30px;
            {#position: fixed;#}
            {#width: 30%;#}
        }

        .ans {
            color: #66bbc3;
            margin-bottom: 5px
        }

        .ans > span {
            font-size: 18px;
            margin-right: 2px
        }
        .layui-colla-title {
            height: auto;
        }

    </style>
{% endblock %}
{% block body %}

    <div class="wrap">
        <div id="left">
            <div id="product">
                <h2>{{ product.title_en }}</h2>

                <!-- <p class="spec"></p>  预留规格属性 -->
                <p class="desc">{{ product.desc_en }}</p>
                <div class="image-wrapper">
                    {% for images in product.image.all %}
                        <img class="image" src="/media/{{ images.image }}" alt="">
                    {% endfor %}
                </div>
            </div>
        </div>
        <div id="right">
            <div id="nav-3">
                <div class="layui-collapse">
                    {% for problem in product.problem.all %}
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">{{ problem.title_en }}</h2>
                            <div class="layui-colla-content">
                                {% for ans in problem.answer.all %}
                                    <div class="ans">
                                    <span>
                                        {{ forloop.counter }}.
                                    </span>
                                        {{ ans.ans_en }}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block script %}
    <script>
        //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
        });
    </script>
{% endblock %}